<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="include :: header('文件上传')" />
  <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
        </div>
        <div class="ibox-content">
          <div class="form-group">
            <label class="font-noraml">上传景点图片</label>
            <div class="file-loading">
              <input id="myFile1" name="myFile" type="file" data-overwrite-initial="false" data-min-file-count="1" multiple>
            </div>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
  var prefix = ctx + "lvyou/spot"
  var id = [[${id}]];
  $(document).ready(function () {
    $("#myFile1").fileinput({
      'theme': 'explorer-fas',
      overwriteInitial: false,
      initialPreviewAsData: true,
      language: 'zh', //设置语言
      browseLabel:'选择上传',
      type:"post",
      dataType:"json",
      uploadUrl: prefix+"/uploadJingquPic?id="+id,  //上传地址
      allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
      showUpload: false, //是否显示上传按钮
      showRemove:true,
      uploadAsync: true,
      dropZoneEnabled: true,
      showDrag:true,
      showCaption: true,//是否显示标题
      maxFileSize : 1000000000,
      maxFileCount: 1000,
      uploadExtraData:function(previewId, index){
        var data = {
          id: id,
          imgIndex: index
        }
        return data;
      }
    }).on("fileuploaded", function(event, data) {
      console.log(data.response.code);
      if(data.response.code == 0){
        $.modal.alertSuccess("上传成功");
      }else{
        $.modal.alertWarning("上传失败");
      }
    })
  });
  function submitHandler() {
    var files = $(".file-preview-frame");
    if(files.length != 0){
      $("#myFile1").fileinput("upload");
    }
  }
</script>
</body>
</html>
